<template>
  <commonPage :showHeader="false">
    <scroller
      slot="page_body"
      style="height: 100%"
      ref="my_scroller"
      :on-refresh="refresh"
      :on-infinite="infinite"
      refresh-layer-color="#4b8bf4"
      loading-layer-color="#ec4949"
      class="page_body"
    >
  <!-- <commonPage :showHeader="false">
    <div
      slot="page_body"
      style="height: 100%"
      ref="my_scroller"
      refresh-layer-color="#4b8bf4"
      loading-layer-color="#ec4949"
      class="page_body"
    > -->
    <div class="all">

    
      <div class="top-t">
        <img src="@/assets/img/head.png" width="100%">
    </div>
     <div class="top-b">
        <div class="top-b-t">
            <div>
                <img src="@/assets/img/jieshao.png" width="100%">
                <p>系统介绍</p>
            </div>
            <div>
                <img src="@/assets/img/duban.png" width="100%">
                <p>督办系统</p>
            </div>
            <div>
                <img src="@/assets/img/shijian.png" width="100%">
                <p>文明实践</p>
            </div>
            <div>
                <img src="@/assets/img/paihang.png" width="100%">
                <p>创建排行</p>
            </div>

            <div>
                <img src="@/assets/img/guanli.png" width="100%">
                <p>文明单位(村镇)管理</p>
            </div>
            <div>
                <img src="@/assets/img/baobei.png" width="100%">
                <p>党员干部婚宴报备</p>
            </div>
            <div>
                <img src="@/assets/img/fuwudian.png" width="100%">
                <p>学雷锋志愿者服务点</p>
            </div>
            <div>
                <img src="@/assets/img/haoren.png" width="100%">
                <p>温州好人</p>
            </div>
        </div>
    </div>
    <div class="kong">

    </div>
    <div class="xinwen">
      <div class="title">
        <div class="lanxian"></div>
        <span>文明新闻</span>
      </div>
      
      <div class="content" v-for="(value,item) in list" :key="item">
        <div class="fenge"></div>
        <div class="aa">
          <div class="c-left">
          <p class="big">{{value.title}}</p>
          <p class="small">{{value.address}}</p>
        </div>
        <div class="c-right">
          <img src="@/assets/img/xinwen1.png" width="100%">
          <!-- {{value.img}} -->
        </div>
        </div>
        
      </div>
    </div>
     <!-- <div class="bottom">
        <div class="d-shouye" :class="check_color==1?'checked':''" @click="check_message(1)">
          <img src="@/assets/img/d-shouye.png" height="50%">
          <p>首页</p>
        </div>
        <div class="d-duban" :class="check_color==2?'checked':''" @click="check_message(2)">
          <img src="@/assets/img/d-duban.png" height="50%">
          <p>督办</p>
        </div>
        <div class="d-xiaoxi" :class="check_color==3?'checked':''" @click="check_message(3)">
          <img src="@/assets/img/d-xiaoxi.png" height="50%">
          <p>消息</p>
        </div>
      </div>
    <div class="di"></div> -->
      
  </div>
    <!-- </div> -->
    </scroller>
    
  </commonPage>
</template>


<script>
import $ from "jquery";
import commonPage from "../components/common/commonPage";
// import message from "../components/common/message";

export default {
  name: "index",
  components: {
    commonPage,
    // message,
  },
  data() {
    return {
      active: 0,
      check_color:1,
      list:[
        {
          title:"这是新闻标题",
          address:"这是新闻发布地址",
          img:""
        },{
          title:"这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题",
          address:"这是新闻发布地址",
          img:""
        },{
          title:"这是新闻标题",
          address:"这是新闻发布地址",
          img:""
        },{
          title:"这是新闻标题",
          address:"这是新闻发布地址这是新闻发布地址这是新闻发布地址这是新闻发布地址",
          img:""
        },{
          title:"这是新闻标题",
          address:"这是新闻发布地址",
          img:""
        },{
          title:"这是新闻标题",
          address:"这是新闻发布地址",
          img:""
        },{
          title:"这是新闻标题",
          address:"这是新闻发布地址",
          img:""
        },{
          title:"这是新闻标题",
          address:"这是新闻发布地址",
          img:""
        }
      ]
    };
  },
 
  created() {
  
  },
  methods: {
    check_message: function (index) {
    this.check_color=index
    },

  },
  
};
</script>
<style >
*{
  padding: 0;
  margin: 0;
  
}
.all{
  width: 100%;
  background: white;
  position: relative;
}
.top-t{
  width: 100%;
}
.top-b{
  width: 100%;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.top-b-t{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.top-b-t > div{
  width: 22%;
  padding: 1.5%;
}
.top-b-t > div > p{
  text-align: center;
  font-size: 0.65rem;
  color: #013b65;
}

.kong{
  width: 100%;
  height: 0.7rem;
  background: #f8fafb;
}
.xinwen{
  width: 100%;
  background: white;
}
.title{
  width: 90%;
  height: 2.5rem;
  display: flex;
  line-height: 2.5rem;
  padding-left: 1rem;
}
.lanxian{
  width: 0.1rem;
  height: 1rem;
  background: #0282e0;
  margin: auto 0.3rem;
}


.content{
  width: 90%;
  padding-left: 5%;
  padding-right: 5%;
}
.fenge{
  width: 100%;
  height: 1px;
  margin: 0 auto;
  background: #dde6ed;
}
.aa{
  display: flex;
  justify-content: space-between;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
.c-left{
  width: 80%;
}
.big{
  font-size: 0.90rem;
  color: #013b65;
}
.small{
  font-size: 0.55rem;
  color: #88939c;
}
.c-right{
 width: 20%;
 margin: auto 0;
}
/* .bottom{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3.3rem;
  display: flex;
  background: white;
}
.d-shouye,.d-duban,.d-xiaoxi{
  width: 33%;
  text-align: center;
  color: #7d8a93;
} 
.checked{
  color: #0282e0;
}
.di{
  width: 100%;
  height: 3.3rem;
  background: white;
} */



</style>
